<template>
	<view class="bazi_info">

		<view class="base_info">
			<view class="title">
				<text class="shu"></text>
				<span class="ti">男方命盘</span>
			</view>
			<view class="show">
				<text class="l">八字:</text>
			<text class="r">{{data.male.bazi[0].trim()}}年</text> 
			<text>	{{data.male.bazi[1].trim()}}月</text> 
			<text>	{{data.male.bazi[2].trim()}}日</text></text>
			</view>
			<view class="show">
				<text class="l">姓名:</text>
				<text class="r">{{data.male.name}}</text>
			</view>
			<view class="show">
				<text class="l">出生公历:</text>
				<text class="r">{{data.male.gongli}}</text>
			</view>
			<view class="show">
				<text class="l">星座:</text>
				<text class="r">{{data.male_xz}}</text>
			</view>
			<view class="show">
				<text class="l">生肖:</text>
				<text class="r">{{data.male_sx}}</text>
			</view>
			<view class="show">
				<text class="l">纳音:</text>
				<text class="r">{{data.male.na_yin.toString()}}</text>
			</view>
		</view>
		<view class="table">
			<view class="list-content">
				<view class="tr1">
					<view class="tr1_w">
						<text class="">#</text>
					</view>
					<view class="" v-for="(tr1,index) in data.male.tg_cg_god" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>#</text>
					</view>
				</view>
				<view class="tr2">
					<view class="tr1_w">
						<text style="font-weight: 800;">乾造</text>
					</view>
					<view class="" v-for="(tr1,index) in data.male.bazi" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>{{(data.male.kw+'空')}}</text>
					</view>
				</view>
				<view class="tr3">
					<view class="tr1_w">
						<text style="font-weight: 800;">藏干</text>
					</view>
					<view class="" v-for="(tr1,index) in data.male.dz_cg" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>#</text>
					</view>
				</view>
				<view class="tr3">
					<view class="tr1_w">
						<text> </text>
					</view>
					<view class="item_w" v-for="(tr1,index) in data.male.dz_cg_god" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>#</text>
					</view>
				</view>
				<view class="tr3">
					<view class="tr1_w">
						<text style="font-weight: 800;">衰旺</text>
					</view>
					<view class="item_w" v-for="(tr1,index) in data.male.day_cs" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>#</text>
					</view>
				</view>
				<view class="tr3" style="border-bottom: none;">
					<view class="tr1_w">
						<text style="font-weight: 800;">纳音</text>
					</view>
					<view class="item_w_nayin" v-for="(tr1,index) in data.male.na_yin" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>#</text>
					</view>
				</view>
			</view>
		</view>
		<view class="base_info">
			<view class="title">
				<text class="shu"></text>
				<span class="ti">女方命盘</span>
			</view>
			<view class="show">
			<text class="l">八字:</text>
			<text class="r">{{data.female.bazi[0].trim()}}年</text> 
			<text>	{{data.female.bazi[1].trim()}}月</text> 
			<text>	{{data.female.bazi[2].trim()}}日</text></text>
		
			</view>
			<view class="show">
				<text class="l">姓名:</text>
				<text class="r">{{data.female.name}}</text>
			</view>
			<view class="show">
				<text class="l">出生公历:</text>
				<text class="r">{{data.female.gongli}}</text>
			</view>
			<view class="show">
				<text class="l">星座:</text>
				<text class="r">{{data.female_xz}}</text>
			</view>
			<view class="show">
				<text class="l">生肖:</text>
					<text class="r">{{data.female_sx}}</text>
			</view>
			<view class="show">
				<text class="l">纳音:</text>
				<text class="r">{{data.female.na_yin.toString()}}</text>
			</view>
		</view>
		<view class="table">
			<view class="list-content">
				<view class="tr1">
					<view class="tr1_w">
						<text class="">#</text>
					</view>
					<view class="" v-for="(tr1,index) in data.female.tg_cg_god" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>#</text>
					</view>
				</view>
				<view class="tr2">
					<view class="tr1_w">
						<text style="font-weight: 800;">乾造</text>
					</view>
					<view class="" v-for="(tr1,index) in data.female.bazi" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>{{(data.female.kw+'空')}}</text>
					</view>
				</view>
				<view class="tr3">
					<view class="tr1_w">
						<text style="font-weight: 800;">藏干</text>
					</view>
					<view class="" v-for="(tr1,index) in data.female.dz_cg" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>#</text>
					</view>
				</view>
				<view class="tr3">
					<view class="tr1_w">
						<text> </text>
					</view>
					<view class="item_w" v-for="(tr1,index) in data.female.dz_cg_god" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>#</text>
					</view>
				</view>
				<view class="tr3">
					<view class="tr1_w">
						<text style="font-weight: 800;">衰旺</text>
					</view>
					<view class="item_w" v-for="(tr1,index) in data.female.day_cs" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>#</text>
					</view>
				</view>
				<view class="tr3" style="border-bottom: none;">
					<view class="tr1_w">
						<text style="font-weight: 800;">纳音</text>
					</view>
					<view class="item_w_nayin" v-for="(tr1,index) in data.female.na_yin" :key="index">
						<text>{{tr1}}</text>
					</view>
					<view class="tr1_w">
						<text>#</text>
					</view>
				</view>
			</view>
		</view>
		<view class="base_info">
			<view class="title">
				<text class="shu"></text>
				<span class="ti">合婚结果</span>
			</view>

			<view class="details">
				<view class="names">
					<text>命宫：</text>
					<text>{{data.minggong.score}}分</text>
				</view>
				<view class="des">
					<text class="des_text">说明</text>
					<text class="des_deta">{{data.minggong.description}}</text>
				</view>
				<view class="des">
					<text class="des_text">详批</text>
					<text class="des_deta">{{data.minggong.detail_description}}</text>
				</view>
			</view>
			<view class="details">
				<view class="names">
					<text>年支同气：</text>
					<text>{{data.nianqitongzhi.score}}分</text>
				</view>
				<view class="des">
					<text class="des_text">说明</text>
					<text class="des_deta">{{data.nianqitongzhi.description}}</text>
				</view>
				<view class="des">
					<text class="des_text">详批</text>
					<text class="des_deta">{{data.nianqitongzhi.detail_description}}</text>
				</view>
			</view>
			<view class="details">
				<view class="names">
					<text>月令合：</text>
					<text>{{data.yueling.score}}分</text>
				</view>
				<view class="des">
					<text class="des_text">说明</text>
					<text class="des_deta">{{data.yueling.description}}</text>
				</view>
				<view class="des">
					<text class="des_text">详批</text>
					<text class="des_deta">{{data.yueling.detail_description}}</text>
				</view>
			</view>
			<view class="details">
				<view class="names">
					<text>日干相合：</text>
					<text>{{data.rigan.score}}分</text>
				</view>
				<view class="des">
					<text class="des_text">说明</text>
					<text class="des_deta">{{data.rigan.description}}</text>
				</view>
				<view class="des">
					<text class="des_text">详批</text>
					<text class="des_deta">{{data.rigan.detail_description}}</text>
				</view>
			</view>

			<view class="details">
				<view class="names">
					<text>天干五合：</text>
					<text>{{data.tiangan.score}}分</text>
				</view>
				<view class="des">
					<text class="des_text">说明</text>
					<text class="des_deta">{{data.tiangan.description}}</text>
				</view>
				<view class="des">
					<text class="des_text">详批</text>
					<text class="des_deta">{{data.tiangan.detail_description}}</text>
				</view>
			</view>
			
			<view class="details">
				<view class="names">
					<text>子女同步：</text>
					<text>{{data.zinv.score}}分</text>
				</view>
				<view class="des">
					<text class="des_text">说明</text>
					<text class="des_deta">{{data.zinv.description}}</text>
				</view>
				<view class="des">
					<text class="des_text">详批</text>
					<text class="des_deta">{{data.zinv.detail_description}}</text>
				</view>
			</view>
			<view class="details">
				<view class="names">
					<text>总分数：</text>
					<text>{{data.all_score}}分</text>
				</view>
			</view>

		</view>
		<view class="yl">
			<text>仅供娱乐！请勿当真</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ff: {},
				data: {
					"male": {
						"bazi": [ //男方八字
							"戊辰", //男方八字【年】
							"癸亥", //男方八字【月】
							"丁卯", //男方八字【日】
							"丙午" //男方八字【时】
						],
						"gl_year": "1988", //男方公历年
						"gl_month": "11", //男方公历月
						"gl_day": "8", //男方公历日
						"gl_hours": "12", //男方公历时
						"sex": "乾造", //性别
						"name": "张三", //男方姓名
						"gongli": "1988年11月8日12时20分", //男方公历年月日时分
						"kw": "戌亥", //男方空亡
						"tg_cg_god": [ //男方天干十神
							"伤", //男方天干十神【年】
							"杀", //男方天干十神【月】
							"日元", //男方天干十神【日】
							"劫" //男方天干十神【时】
						],
						"dz_cg": [ //男方地支藏干
							"戊|乙|癸", //男方地支藏干【年】
							"壬|甲", //男方地支藏干【月】
							"乙", //男方地支藏干【月】
							"丁|己" //男方地支藏干【时】
						],
						"dz_cg_god": [ //男方地支藏干十神
							"伤|枭|杀", //男方地支藏干十神【年】
							"官|印", //男方地支藏干十神【月】
							"枭", //男方地支藏干十神【月】
							"比|食" //男方地支藏干十神【时】
						],
						"day_cs": [ //男方八字长生衰旺
							"衰", //男方八字长生衰旺【年】
							"胎", //男方八字长生衰旺【月】
							"病", //男方八字长生衰旺【日】
							"临官" //男方八字长生衰旺【时】
						],
						"na_yin": [ //男方八字纳音
							"大林木", //男方八字纳音【年】
							"大海水", //男方八字纳音【月】
							"炉中火", //男方八字纳音【日】
							"天河水" //男方八字纳音【时】
						]
					},
					"female": {
						"bazi": [ //女方八字
							"戊辰", //女方八字【年】
							"癸亥", //女方八字【月】
							"丁卯", //女方八字【日】
							"丙午" //女方八字【时】
						],
						"gl_year": "1988", //女方公历年
						"gl_month": "11", //女方公历月
						"gl_day": "8", //女方公历日
						"gl_hours": "12", //女方公历时
						"sex": "坤造", //性别
						"name": "李四", //女方姓名
						"gongli": "1988年11月8日12时20分", //女方公历年月日时分
						"kw": "戌亥", //女方空亡
						"tg_cg_god": [ //女方天干十神
							"伤", //女方天干十神【年】
							"杀", //女方天干十神【月】
							"日元", //女方天干十神【日】
							"劫" //女方天干十神【时】
						],
						"dz_cg": [ //女方地支藏干
							"戊|乙|癸", //女方地支藏干【年】
							"壬|甲", //女方地支藏干【月】
							"乙", //女方地支藏干【日】
							"丁|己" //女方地支藏干【时】
						],
						"dz_cg_god": [ //女方地支藏干十神
							"伤|枭|杀", //女方地支藏干十神【年】
							"官|印", //女方地支藏干十神【月】
							"枭", //女方地支藏干十神【日】
							"比|食" //女方地支藏干十神【时】
						],
						"day_cs": [ //女方八字长生衰旺
							"衰", //女方八字长生衰旺【年】
							"胎", //女方八字长生衰旺【月】
							"病", //女方八字长生衰旺【日】
							"临官" //女方八字长生衰旺【时】
						],
						"na_yin": [ //女方八字纳音
							"大林木", //女方八字纳音【年】
							"大海水", //女方八字纳音【月】
							"炉中火", //女方八字纳音【日】
							"天河水" //女方八字纳音【时】
						]
					},
					"minggong": { //合婚命宫
						"male_fengshui": "",
						"female_fengshui": "",
						"score": "30", //合婚命宫打分
						"male_minggong": "震",
						"female_minggong": "震",
						"description": "。",
						"detail_description": "" //命宫详细批示
					},
					"nianqitongzhi": { //年支同气
						"score": "20", //年支同气打分
						"male_nian_zhi": "辰",
						"male_nian_zhi_desc": "木",
						"female_nian_zhi": "辰",
						"female_nian_zhi_desc": "木",
						"description": "",
						"detail_description": "" //年气同支详细批示
					},
					"yueling": { //月令合
						"score": "5", //月令合打分
						"male_yue_zhi": "亥",
						"female_yue_zhi": "亥",
						"description": "",
						"detail_description": "" //月令合详细批示
					},
					"rigan": { //日干相合
						"score": "25", //日干相合打分
						"male_yue_zhi": "丁",
						"female_yue_zhi": "丁",
						"description": "。",
						"detail_description": "" //日干相合详细批示
					},
					"tiangan": { //天干五合
						"score": "5", //天干五合打分
						"male_yue_zhi": "丁",
						"female_yue_zhi": "丁",
						"description": "",
						"detail_description": "" //天干五合详细批示
					},
					"zinv": { //子女同步
						"nannv": "男", //生男生女
						"score": "15", //子女同步打分
						"description": "",
						"detail_description": "" //子女同步详细批示
					},
					"all_score": 100, //合婚总分
					"male_sx": "龙", //男方生肖
					"female_sx": "龙", //女方生肖
					"male_xz": "天蝎座", //男方星座
					"female_xz": "天蝎座" //女方星座
				}
			}
		},
		onLoad(options) {
			 this.data=JSON.parse(options.data)
			// console.log(this.data)
			// console.log(options.data)

		}
	}
</script>

<style lang="scss">
	@mixin flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px;
		height: 45px;
	}
	
	@mixin tr1_w {
		width: 33px;
		text-align: center;
	
	}
	text{
		user-select: all;
	}
	.bazi_info {

		.base_info {
			margin: 20px;

			.title {
				display: flex;
				padding: 10rpx;

				.shu {

					width: 5px;
					height: 20px;
					background-color: #e6a84b;
					border-radius: $uni-border-radius-base;
				}

				.ti {
					padding-left: 15rpx;
					font-weight: 800;
					font-size: 30rpx;
				}
			}

			.show {
				margin-top: 15px;

				.l_ {
					font-size: 28rpx;
					display: inline-block;
					min-width: 50px;
					font-weight: 800;
				}

				.l {
					font-size: 30rpx;
					display: inline-block;
					min-width: 80px;
					font-weight: 800;

				}

				
			}

			.details {
				border: 1px solid #e5e5e5;
				border-bottom: none;
				margin-top: 20px;
				.names {
					text-align: center;
					color: #e6a84b;
					border-bottom: 1px solid #e5e5e5;
					color: #e6a84b;
					font-weight: 800;
					background-color: #fff3ef;
					height: 50px;
					line-height: 50px;
				}

				.des {
					border-bottom: 1px solid #e5e5e5;
					padding-left: 20rpx;
					display: flex;
					align-items: center;

					.des_text {
						color: #e6a84b;
						width: 14%;
						font-weight: 800;
						user-select:text;
					}

					.des_deta {
						width: 85%;
						line-height: 26px;
						text-indent: 2em;
						user-select:text;
					}
				}
			}
		}
	.table {
		.list-content {
			width: 100%;

			.tr1 {
				.tr1_w {
					@include tr1_w;
				}

				view {
					color: #1c04cc;
					font-weight: 600;
				}

				@include flex;
				// height: 50px;
				border-bottom: 1px solid #ccc;
			}

			.tr2 {
				.tr1_w {
					@include tr1_w;
				}

				view {
					color: red;

				}

				@include flex;
				// height: 50px;
				border-bottom: 1px solid #ccc;
			}

			.tr3 {
				.tr1_w {
					@include tr1_w;
				}

				.item_w {
					width: 60px;
					text-align: center;

				}

				.item_w_nayin {
					color: green
				}

				@include flex;
				// height: 50px;
				border-bottom: 1px solid #ccc;
			}

		}
	}
	}
</style>